@import '../../../../shared/src/components/Resizable';

.resizable-panel {
    isolation: isolate;
    min-height: 6rem;
    max-height: calc(100% - 3rem);
    width: 100%;
}

.panel {
    flex: 1 1 50%;
    min-height: 0;

    overflow-x: auto;

    display: flex;
    flex-direction: column;
    position: relative;

    background-color: var(--color-bg-1);
    border-top: 1px solid var(--border-color);
    width: 100%;

    &__empty {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.6;
    }

    &__tabs-content {
        flex: 1;

        &--scroll {
            overflow: auto;
        }
    }

    .theme-redesign & {
        border-top: 2px solid var(--border-color-2);

        &__header {
            padding: 0 1rem;
            background-color: var(--color-bg-1);
        }

        &__dismiss {
            color: var(--icon-color);
        }

        [data-reach-tab]:first-child {
            margin-left: 0;
        }

        [data-reach-tab-panels] {
            padding: 0.25rem 1rem;
        }

        &__empty {
            padding-top: 0.5rem;
        }
    }
}
